<template>
    <div class="countDiv">
        <select v-model.number="op">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
        <br>
        结果：{{ countStore.sum }}
    </div>
</template>

<script lang="ts">
export default {
    name: 'Count'
}
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { useCountStore } from '@/store/CountStore'

const countStore = useCountStore()
// let sum = ref(0)
let op = ref(1)

function add() {
    countStore.sum += op.value
}

function minus() {
    countStore.sum -= op.value
}

</script>

<style lang="css">
.countDiv {
    margin: 20px;
    height: 200px;
    width: 200px;
    background-color: burlywood;
}

.countDiv button {
    width: 50px;
}
</style>